<template>
	<view class="recycle_order_list-container">
		<!-- Tabs -->
		<view class="tabs-container">
			<u-tabs :list="tabs" :is-scroll="false" :current="tabCurrent" font-size="28" active-color="#333333"
				bar-width="80" :bar-style="{'background-color': '#24A3FF'}" @change="changeTab" />
		</view>

		<!-- Content -->
		<view class="recycle_order_list-content">
			<!-- 全部 -->
			<view v-show="tabCurrent == 0">
				<block v-for="item in allOrderList" :key="item.id">
					<view class="recycle_order-list-item">
						<recycle-order-list-panel :data="item" @on-self="goDetails" />
					</view>
				</block>
				<loading-footer :status="allStatus.status" />
			</view>

			<!-- 进行中 -->
			<view v-show="tabCurrent == 1">
				<block v-for="item in doingOrderList" :key="item.id">
					<view class="recycle_order-list-item">
						<recycle-order-list-panel :data="item" @on-self="goDetails" />
					</view>
				</block>
				<loading-footer :status="doingStatus.status" />
			</view>

			<!-- 已完成 -->
			<view v-show="tabCurrent == 2">
				<block v-for="item in doneOrderList" :key="item.id">
					<view class="recycle_order-list-item">
						<recycle-order-list-panel :data="item" @on-self="goDetails" />
					</view>
				</block>
				<loading-footer :status="doneStatus.status" />
			</view>
		</view>
	</view>
</template>


<script>
	import {
		getOrderList
	} from '@/api/recycle';
	import {
		loadingType
	} from '@/utils/type';
	import {
		loadingFun
	} from "@/utils/tools";

	export default {
		data() {
			return {
				// Tabs列表
				tabs: [{
					name: '全部'
				}, {
					name: '进行中'
				}, {
					name: '已完成',
				}],
				tabCurrent: 0, // 当前Tab索引  [0-所有订单; 1-进行中订单; 2-已完成订单;]
				allOrderList: [], // 所有订单列表
				doingOrderList: [], // 进行中订单列表
				doneOrderList: [], // 已完成订单列表
				// 全部列表状态
				allStatus: {
					page: 1,
					status: loadingType.LOADING,
				},
				// 进行中列表状态
				doingStatus: {
					page: 1,
					status: loadingType.LOADING,
				},
				// 已完成列表状态
				doneStatus: {
					page: 1,
					status: loadingType.LOADING,
				}
			}
		},
		methods: {
			// 切换Tabs
			changeTab(index) {
				this.tabCurrent = index;
			},

			// 全部列表数据请求
			reqAllOrderList() {
				loadingFun(
					getOrderList,
					this.allStatus.page,
					this.allOrderList,
					this.allStatus.status, {
						type: 'all'
					}
				).then(res => {
					if (!res) return;
					this.allStatus.page = res.page
					this.allOrderList = res.dataList
					this.allStatus.status = res.status
				});
			},

			// 进行中列表数据请求
			reqDoingOrderList() {
				loadingFun(
					getOrderList,
					this.doingStatus.page,
					this.doingOrderList,
					this.doingStatus.status, {
						type: 'onl'
					}
				).then(res => {
					if (!res) return;
					this.doingStatus.page = res.page
					this.doingOrderList = res.dataList
					this.doingStatus.status = res.status
				});
			},

			// 已完成列表数据请求
			reqDoneOrderList() {
				loadingFun(
					getOrderList,
					this.doneStatus.page,
					this.doneOrderList,
					this.doneStatus.status, {
						type: 'end'
					}
				).then(res => {
					if (!res) return;
					this.doneStatus.page = res.page
					this.doneOrderList = res.dataList
					this.doneStatus.status = res.status
				});
			},

			// 状态初始化 
			resetData() {
				this.allOrderList.length = 0, // 所有订单列表
					this.doingOrderList.length = 0, // 进行中订单列表
					this.doneOrderList.length = 0, // 已完成订单列表
					// 全部列表状态
					this.allStatus = {
						page: 1,
						status: loadingType.LOADING,
					}
				// 进行中列表状态
				this.doingStatus = {
					page: 1,
					status: loadingType.LOADING,
				}
				// 已完成列表状态
				this.doneStatus = {
					page: 1,
					status: loadingType.LOADING,
				}
			},

			// 跳转详情
			goDetails(id) {
				uni.navigateTo({
					url: '/bundle/pages/recycle_order_detail/recycle_order_detail' +
						'?id=' + id
				})
			}

		},

		onShow() {
			// 初始化请求状态
			this.resetData();
			// 各列表数据请求
			this.reqAllOrderList();
		},

		// 下拉加载更多
		onReachBottom() {
			// 根据当前的Tab请求相应的数据
			switch (this.tabCurrent) {
				case 0:
					return this.reqAllOrderList();
				case 1:
					return this.reqDoingOrderList();
				case 2:
					return this.reqDoneOrderList();
			}
		},
	}
</script>


<style scoped>
	.recycle_order_list-container {
		padding-top: 88rpx;
	}

	.tabs-container {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
	}

	.recycle_order_list-content {
		padding: 20rpx;
	}

	.recycle_order-list-item:nth-child(n + 2) {
		margin-top: 20rpx;
	}
</style>